<template>
  <div class="setting-drawer-content">
    <div class="setting-drawer-block-checbox">
      <div class="setting-drawer-block-checbox-item" @click="ret2">
        <span class="iconfont icon-pifu1 fsmall skingblue"></span>
      </div>

      <div class="setting-drawer-block-checbox-item" @click="ret1">
        <span class="iconfont icon-pifu1 fsmall skingwhite"></span>
      </div>

      <!-- <div class="setting-drawer-block-checbox-item" @click="ret3">
        <span class="iconfont icon-pifu1 fsmall skinggreen"></span>
      </div> -->
    </div>
  </div>
</template>
<script>
import "@/assets/css/green/wx.scss";
import "@/assets/css/white/wx.scss";
import "@/assets/css/blue/wx.scss";

export default {
  name: "skinpage",
  data() {
    return {
      //accountId: this.$store.state.user.userId,
      // 原始select方式的选择替换
      theme: "",
      // theme_list: [
      //   {
      //     name: "默认",
      //     type: "default"
      //   },
      //   {
      //     name: "蓝色",
      //     type: "blue"
      //   }
      // ]
    };
  },

  mounted() {
    //设置body的class
    //let theme = window.localStorage.getItem("theme") || "blue";
    //document.body.setAttribute("class", "custom-blue"); //初始化样式赋值
  },
  created() {
    // setInterval(this.isRoom, 5000);
  },
  methods: {
    /* 原始select换肤方式
      changeTheme(val) {
        document.body.setAttribute("class", "custom-" + val);
        console.log("app changeTheme", val);
        window.localStorage.setItem("theme", val);
      }, */

    ret1() {
      this.$root.globalTheme = "custom-white";
      document.body.setAttribute("class", this.$root.globalTheme);
    },
    ret2() {
      this.$root.globalTheme = "custom-blue";
      document.body.setAttribute("class", this.$root.globalTheme);
    },
    ret3() {
      this.$root.globalTheme = "custom-green";
      document.body.setAttribute("class", this.$root.globalTheme);
    },
    // 定时任务
    /* isRoom() {
      let params = { url: "accountLogin/self", param: this.accountId };
      commonRest(params).then(res => {
        if (res.code == 0) {
          let netaddr = window.location.href;
          let num = this.find(netaddr, "/", 3); // 位置
          let splitAddr = netaddr.slice(0, num);
          if (res.extendData.roomId != null) {
            // 当前人员被加入到房间内需要进行跳转
            this.thisRoom(res.extendData.roomId, splitAddr, netaddr);
          } else {
            // 当前人员不在房间内
            window.location.href = splitAddr;
          }
        }
      });
    },

    thisRoom(roomId, splitAddr, netaddr) {
      let newaddr = splitAddr + "jrxl/" + roomId;
      if (netaddr != newaddr) {
        window.location.href = newaddr;
      }
    },

    find(str, cha, index) {
      let strVal = str;
      let strVal1 = "";
      let value = 0;
      for (let i = 0; i < index; i++) {
        strVal1 = strVal.substring(0, strVal.indexOf(cha));
        strVal = strVal.substring(strVal1.length + 1);
        value += strVal1.length + 1;
      }
      return value;
    } */
  },
};
</script>

<style lang="scss" scoped>
.setting-drawer-content {
  .setting-drawer-title {
    margin-bottom: 12px;
    color: rgba(0, 0, 0, 0.85);
    font-size: 14px;
    line-height: 22px;
    font-weight: bold;
  }

  .setting-drawer-block-checbox {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 10px;
    margin-bottom: 20px;

    .setting-drawer-block-checbox-item {
      position: relative;
      margin-right: 10px;
      border-radius: 2px;
      cursor: pointer;

      img {
        width: 48px;
        height: 48px;
      }

      .setting-drawer-block-checbox-selectIcon {
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        padding-top: 15px;
        padding-left: 24px;
        color: #1890ff;
        font-weight: 700;
        font-size: 14px;
      }
    }
  }
}

.drawer-container {
  padding: 24px;
  font-size: 14px;
  line-height: 1.5;
  word-wrap: break-word;

  .drawer-title {
    margin-bottom: 12px;
    color: rgba(0, 0, 0, 0.85);
    font-size: 14px;
    line-height: 22px;
  }

  .drawer-item {
    color: rgba(0, 0, 0, 0.65);
    font-size: 14px;
    padding: 12px 0;
  }

  .drawer-switch {
    float: right;
  }
}
</style>
